<template>
	<view>
		<view class="position">
			<view class="name">
				<u-icon name="map" color="#ffffff" size="20"></u-icon>
				<u--text :text="dataList.name" color='#ffffff'></u--text>
			</view>
			<view class="error">
				<u--text text="定位错误" color='#ffffff' size='12px'></u--text>
				<image src="../../static/service_images/帮助.png" mode=""></image>
			</view>
		</view>
		<view class="search">
			<view class="searchItem" :style="{background:item.color}" v-for="(item,index) in searchList" :key='index' @click="changes(item)">
				<u--image :src="item.icon" width="80px" height="80px"></u--image>
				<u--text :text="item.title" color='#ffffff'></u--text>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:{
					name:'慧康通养老院'
				},
				show: false,
				searchList:[
					{
						title:'送餐上门',
						icon:require('../../static/service_images/送餐 (1).png'),
						url:'',
						color:'#FF9800',
						type: 'success',
						message: "请求发送成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					},
					{
						title:'健康咨询',
						icon:require('../../static/service_images/咨询.png'),
						url:'',
						color:'#EF5555',
						type: 'success',
						message: "咨询人员正在路上",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					},
					{
						title:'护理服务',
						icon:require('../../static/service_images/养生护理2mb (1).png'),
						url:'',
						color:'#F153DB',
						type: 'success',
						message: "请求发送成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					},
					{
						title:'清洁打扫',
						icon:require('../../static/service_images/清洁 (1).png'),
						url:'',
						color:'#AE55EF',
						type: 'success',
						message: "请求发送成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					},
				]
			}
		},
		methods: {
			changes(params){
				console.log(params)
				this.$refs.uToast.show(
				{
					...params
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.position{
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #FF9800;
	color: #FFFFFF;
	.name{
		display: flex;
		/deep/ .u-icon{
			margin-right: 10px;
		}
	}
	.error{
		display: flex;
		align-items: center;
		image{
			width: 15px;
			height: 15px;
		}
	}
}
.search{
	
	padding: 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.searchItem{
		border-radius: 10px;
		width: 40%;
		height: 250rpx;
		padding: 10px;
		text-align: center;
		margin-bottom: 30px;
		box-shadow:0 5px 8px #A19D96;
		/deep/ .u-image{
			margin: 0 auto;
		}
		/deep/ .u-text{
			text{
				margin: 0 auto;
			}
		}
	}
}
.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>
